<template>
  <div class="user-manage">
    <!-- 查询区域 -->
    <div class="query-form">
      <el-form :inline="true" :model="queryForm" ref="refQueryForm">
        <el-form-item label="审批状态:" prop="applyState">
          <el-select v-model="queryForm.applyState" placeholder="请选择用户状态">
            <el-option label="全部" :value="''"></el-option>
            <el-option label="待审批" :value="1"></el-option>
            <el-option label="审批中" :value="2"></el-option>
            <el-option label="审批拒绝" :value="3"></el-option>
            <el-option label="审批通过" :value="4"></el-option>
            <el-option label="作废" :value="5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getApplyList" v-auth="'approve-query'">查询</el-button>
          <el-button @click="restForm('refQueryForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="base-table">
      <!-- 用户列表 -->
      <el-table :data="applyList">
        <el-table-column
          v-for="colum in colums"
          :key="colum.prop"
          :prop="colum.prop"
          :label="colum.label"
          :formatter="colum.formatter"
          :width="colum.width"
        >
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button
              size="mini"
              type="primary"
              @click="showDetail(scope.row)"
              v-if="userInfo.userName == scope.row.curAuditUserName && [1, 2].includes(scope.row.applyState)"
              >审核</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        :total="pager.total"
        :page-size="pager.pageSize"
        @current-change="handlePageNumChange"
      />
    </div>
    <!-- 查看弹框 -->
    <el-dialog title="审核" width="50%" v-model="showDetailModal" destroy-on-close>
      <el-form label-width="120px" label-suffix=":" ref="refApproveForm" :rules="rules" :model="auditForm">
        <el-form-item label="申请人">
          <div>{{ detail.applyUser.userName }}</div>
        </el-form-item>
        <el-form-item label="休假类型">
          <div>{{ detail.applyTypeName }}</div>
        </el-form-item>
        <el-form-item label="休假时间">
          <div>{{ detail.time }}</div>
        </el-form-item>
        <el-form-item label="休假时长">
          <div>{{ detail.leaveTime }}</div>
        </el-form-item>
        <el-form-item label="休假原因">
          <div>{{ detail.reasons }}</div>
        </el-form-item>
        <el-form-item label="审批状态">
          <div>{{ detail.applyStateName }}</div>
        </el-form-item>
        <el-form-item label="审批人">
          <div>{{ detail.curAuditUserName }}</div>
        </el-form-item>
        <el-form-item label="备注" prop="remark" required>
          <el-input v-model="auditForm.remark" placeholder="请输入审核备注" type="textarea" :row="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="handleApprove('pass')">审核通过</el-button>
        <el-button @click="handleApprove('refuse')">驳回</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { onMounted, reactive, ref, getCurrentInstance, toRaw } from 'vue';
import utils from '@/utils/utils.js';
export default {
  name: 'Approve',
  setup() {
    // 上下文对象
    let { ctx } = getCurrentInstance();
    // 查询表单
    const queryForm = reactive({ applyState: 1 });
    // 申请列表
    const applyList = ref([]);
    // 操作模式 add:添加，delete:作废
    const action = ref('add');
    // 分页对象
    const pager = reactive({ pageNum: 1, pageSize: 10, total: 0 });
    // 查看详情的弹框
    const showDetailModal = ref(false);
    // 详情对象
    const detail = ref({});
    // 定义表格规范
    const colums = reactive([
      { label: '单号', prop: 'orderNo' },
      {
        label: '申请人',
        formatter(row, column, value) {
          return row.applyUser.userName;
        },
      },
      {
        label: '休假时间',
        prop: 'leaveTime',
        formatter(row, column, value) {
          return ctx.$utils.formateDate(new Date(row.startTime), 'yyyy-MM-dd') + ' 到 ' + ctx.$utils.formateDate(new Date(row.endTime), 'yyyy-MM-dd');
        },
      },
      { label: '休假时长', prop: 'leaveTime' },
      {
        label: '休假类型',
        prop: 'applyType',
        formatter(row, column, value) {
          return { 1: '事假', 2: '调休', 3: '年假' }[value];
        },
      },
      { label: '休假原因', prop: 'reasons' },
      {
        label: '申请时间',
        prop: 'createTime',
        formatter(row, column, value) {
          return ctx.$utils.formateDate(new Date(row.createTime));
        },
      },
      { label: '审批人', prop: 'auditUsers' },
      { label: '当前审批人', prop: 'curAuditUserName' },
      {
        label: '审批状态',
        prop: 'applyState',
        formatter(row, column, value) {
          return { 1: '待审批', 2: '审批中', 3: '审批拒绝', 4: '审批通过', 5: '作废' }[value];
        },
      },
    ]);
    // 当前用户信息
    const userInfo = ctx.$store.state.userInfo;
    // 审核信息表单
    const auditForm = reactive({});
    // 定义表单校验规则
    const rules = {
      remark: [{ required: true, message: '请输入审核备注' }],
    };
    // 获取审批列表
    const getApplyList = async () => {
      let params = { type: 'approve', ...queryForm, ...pager };
      let { list, page } = await ctx.$api.getLeaveList(params);
      applyList.value = list;
      pager.total = page.total;
    };

    onMounted(() => {
      getApplyList();
    });
    // 表单重置事件
    const restForm = (formName) => {
      ctx.$refs[formName].resetFields();
    };
    // 分页事件处理
    const handlePageNumChange = (pageNum) => {
      pager.pageNum = pageNum;
      getApplyList();
    };
    // 显示申请
    const showDetail = (row) => {
      let data = { ...row };
      data.applyTypeName = { 1: '事假', 2: '调休', 3: '年假' }[data.applyType];
      data.time =
        ctx.$utils.formateDate(new Date(data.startTime), 'yyyy-MM-dd') + ' 到 ' + ctx.$utils.formateDate(new Date(data.endTime), 'yyyy-MM-dd');
      data.applyStateName = { 1: '待审批', 2: '审批中', 3: '审批拒绝', 4: '审批通过', 5: '作废' }[data.applyState];
      detail.value = data;
      showDetailModal.value = true;
    };

    // 审核方法
    const handleApprove = async (action) => {
      ctx.$refs.refApproveForm.validate(async (valid) => {
        if (valid) {
          let params = { action, remark: auditForm.remark, _id: detail.value._id };
          let res = await ctx.$api.leaveApprove(params);
          // 善后操作
          showDetailModal.value = false;
          ctx.$store.commit('setNoticeCount', ctx.$store.state.noticeCount - 1);
          getApplyList();
        }
      });
    };

    return {
      showDetail,
      handlePageNumChange,
      getApplyList,
      colums,
      queryForm,
      pager,
      applyList,
      showDetailModal,
      detail,
      userInfo,
      auditForm,
      handleApprove,
      rules,
    };
  },
};
</script>
